<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date Calculator</title>
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #0a0a0a;
            color: #e0e0e0;
        }
        .container {
            background: #1a1a1a;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        }
        h1 {
            color: #4a9eff;
            margin-bottom: 30px;
            text-align: center;
        }
        .date-inputs {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 30px;
        }
        .input-group {
            background: #252525;
            padding: 20px;
            border-radius: 8px;
            border: 1px solid #333;
        }
        .input-group label {
            display: block;
            margin-bottom: 10px;
            color: #888;
            font-size: 0.9em;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        input[type="date"] {
            width: 100%;
            padding: 12px;
            background: #1a1a1a;
            border: 2px solid #333;
            border-radius: 6px;
            color: #e0e0e0;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        input[type="date"]:focus {
            outline: none;
            border-color: #4a9eff;
        }
        input[type="date"]::-webkit-calendar-picker-indicator {
            filter: invert(1);
            cursor: pointer;
        }
        .date-section {
            background: #252525;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            border: 1px solid #333;
        }
        .date-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }
        .info-card {
            background: #1a1a1a;
            padding: 15px;
            border-radius: 6px;
            border: 1px solid #444;
            transition: transform 0.2s, border-color 0.2s;
        }
        .info-card:hover {
            transform: translateY(-2px);
            border-color: #4a9eff;
        }
        .label {
            color: #888;
            font-size: 0.9em;
            margin-bottom: 5px;
        }
        .value {
            color: #4a9eff;
            font-size: 1.2em;
            font-weight: 600;
        }
        .timeline {
            margin-top: 30px;
            padding: 20px;
            background: #252525;
            border-radius: 8px;
        }
        .timeline h3 {
            margin-bottom: 20px;
            color: #e0e0e0;
        }
        .timeline-container {
            position: relative;
            margin: 20px 0;
        }
        .timeline-bar {
            height: 40px;
            background: #333;
            border-radius: 8px;
            position: relative;
            overflow: hidden;
        }
        .timeline-range {
            position: absolute;
            height: 100%;
            background: linear-gradient(to right, #4a9eff 0%, #8b4a9e 100%);
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        .timeline-marker {
            position: absolute;
            top: -10px;
            width: 2px;
            height: 60px;
            background: #fff;
            box-shadow: 0 0 10px rgba(255,255,255,0.5);
        }
        .timeline-labels {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            font-size: 0.85em;
            color: #666;
        }
        .calculation-method {
            background: #252525;
            padding: 20px;
            border-radius: 8px;
            margin-top: 20px;
            border: 1px solid #333;
        }
        .method-options {
            display: flex;
            gap: 20px;
            margin-top: 10px;
            flex-wrap: wrap;
        }
        .method-options label {
            display: flex;
            align-items: center;
            cursor: pointer;
            color: #888;
        }
        .method-options input[type="radio"] {
            margin-right: 8px;
        }
        @media (max-width: 600px) {
            .date-inputs {
                grid-template-columns: 1fr;
            }
            .date-info {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Date Calculator</h1>
        
        <div class="date-inputs">
            <div class="input-group">
                <label for="date1">Start Date</label>
                <input type="date" id="date1" value="2025-02-27">
            </div>
            <div class="input-group">
                <label for="date2">End Date</label>
                <input type="date" id="date2" value="2025-04-14">
            </div>
        </div>

        <div class="calculation-method">
            <h3>Calculation Method</h3>
            <div class="method-options">
                <label>
                    <input type="radio" name="method" value="all" checked>
                    All Days
                </label>
                <label>
                    <input type="radio" name="method" value="business">
                    Business Days Only
                </label>
                <label>
                    <input type="radio" name="method" value="weekends">
                    Weekends Only
                </label>
            </div>
        </div>

        <div class="date-section">
            <h2>Results</h2>
            <div class="date-info" id="dateInfo"></div>
        </div>

        <div class="timeline">
            <h3>Visual Timeline</h3>
            <div class="timeline-container">
                <div class="timeline-bar">
                    <div class="timeline-range" id="timelineRange"></div>
                    <div class="timeline-marker" id="todayMarker"></div>
                </div>
                <div class="timeline-labels" id="timelineLabels"></div>
            </div>
        </div>
    </div>

    <script>
        let currentYear = new Date().getFullYear();

        function calculateDates() {
            // Get selected dates
            const date1 = new Date(document.getElementById('date1').value);
            const date2 = new Date(document.getElementById('date2').value);
            const today = new Date();
            const method = document.querySelector('input[name="method"]:checked').value;
            
            // Determine which date is earlier
            const startDate = date1 < date2 ? date1 : date2;
            const endDate = date1 > date2 ? date1 : date2;
            
            // Calculate differences
            const diffMs = Math.abs(date2 - date1);
            const totalDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
            const diffWeeks = Math.floor(totalDays / 7);
            const diffMonths = Math.floor(totalDays / 30.44); // Average month length
            
            // Calculate different types of days
            let businessDays = 0;
            let weekendDays = 0;
            let currentDate = new Date(startDate);
            
            while (currentDate <= endDate) {
                const dayOfWeek = currentDate.getDay();
                if (dayOfWeek === 0 || dayOfWeek === 6) {
                    weekendDays++;
                } else {
                    businessDays++;
                }
                currentDate.setDate(currentDate.getDate() + 1);
            }
            
            // Calculate displayed days based on method
            let displayDays = totalDays;
            let dayTypeLabel = "Total Days";
            if (method === 'business') {
                displayDays = businessDays;
                dayTypeLabel = "Business Days";
            } else if (method === 'weekends') {
                displayDays = weekendDays;
                dayTypeLabel = "Weekend Days";
            }
            
            // Format dates
            const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
            
            // Calculate days from today
            const daysFromToday = Math.floor((startDate - today) / (1000 * 60 * 60 * 24));
            const daysUntilEnd = Math.floor((endDate - today) / (1000 * 60 * 60 * 24));
            
            // Create info cards
            const infoHtml = `
                <div class="info-card">
                    <div class="label">Start Date</div>
                    <div class="value">${startDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</div>
                </div>
                <div class="info-card">
                    <div class="label">End Date</div>
                    <div class="value">${endDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</div>
                </div>
                <div class="info-card">
                    <div class="label">${dayTypeLabel}</div>
                    <div class="value">${displayDays} days</div>
                </div>
                <div class="info-card">
                    <div class="label">Total Weeks</div>
                    <div class="value">${diffWeeks} weeks</div>
                </div>
                <div class="info-card">
                    <div class="label">Business Days</div>
                    <div class="value">${businessDays} days</div>
                </div>
                <div class="info-card">
                    <div class="label">Weekend Days</div>
                    <div class="value">${weekendDays} days</div>
                </div>
                <div class="info-card">
                    <div class="label">From Today</div>
                    <div class="value">${daysFromToday > 0 ? `In ${daysFromToday} days` : `${Math.abs(daysFromToday)} days ago`}</div>
                </div>
                <div class="info-card">
                    <div class="label">Duration</div>
                    <div class="value">${diffMonths > 0 ? `~${diffMonths} months` : `${totalDays} days`}</div>
                </div>
            `;
            
            document.getElementById('dateInfo').innerHTML = infoHtml;
            
            // Update timeline
            updateTimeline(startDate, endDate, today);
        }
        
        function updateTimeline(startDate, endDate, today) {
            // Determine the year range to show
            const years = [...new Set([startDate.getFullYear(), endDate.getFullYear(), today.getFullYear()])];
            const minYear = Math.min(...years);
            const maxYear = Math.max(...years);
            
            // Create timeline labels
            const timelineLabels = document.getElementById('timelineLabels');
            timelineLabels.innerHTML = '';
            
            const yearStart = new Date(minYear, 0, 1);
            const yearEnd = new Date(maxYear, 11, 31);
            const totalRange = yearEnd - yearStart;
            
            // Add year labels
            for (let year = minYear; year <= maxYear; year++) {
                for (let month = 0; month < 12; month += 3) {
                    const label = document.createElement('span');
                    const date = new Date(year, month, 1);
                    if (date >= yearStart && date <= yearEnd) {
                        label.textContent = date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
                        timelineLabels.appendChild(label);
                    }
                }
            }
            
            // Update range highlight
            const rangeStart = ((startDate - yearStart) / totalRange) * 100;
            const rangeEnd = ((endDate - yearStart) / totalRange) * 100;
            const rangeElement = document.getElementById('timelineRange');
            rangeElement.style.left = `${rangeStart}%`;
            rangeElement.style.width = `${rangeEnd - rangeStart}%`;
            
            // Update today marker
            const todayPosition = ((today - yearStart) / totalRange) * 100;
            const todayMarker = document.getElementById('todayMarker');
            todayMarker.style.left = `${Math.max(0, Math.min(100, todayPosition))}%`;
        }
        
        // Event listeners
        document.getElementById('date1').addEventListener('change', calculateDates);
        document.getElementById('date2').addEventListener('change', calculateDates);
        document.querySelectorAll('input[name="method"]').forEach(radio => {
            radio.addEventListener('change', calculateDates);
        });
        
        // Initial calculation
        calculateDates();
    </script>
</body>
</html>
